<template>
  <div>
    <div id="monthChart" ref="lineChart" style="width:100%;height:28vh" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      data1: [],
      data2: [],
    }
  },
  props: {
    sumDataDay: {
      type: Array,
      default: function() {
        return []
      },
    },
  },
  mounted() {
    this.initChart()
  },

  watch: {
    sumDataDay: {
      handler() {
        this.initChart()
      },
      // immediate: true,
      deep: true,
    },
  },
  methods: {
    initChart() {
      const data1 = this.sumDataDay.map((item) => {
        return item.num
      })
      const data2 = this.sumDataDay.map((item) => {
        return item.title
      })

      const myChart = this.$echarts.init(this.$refs.lineChart)
      const option = {
        title: {
          text: '当日入库数量',
          top: 12,
          right: 15,
          // left: 'right',
          textStyle: {
            fontSize: 14,
            color: '#ddd',
            fontWeight: 'normal',
          },
        },
        grid: {
          top: 20,
          left: '3%',
          right: '3%',
          bottom: '5px',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: data2,
          axisLabel: {
            color: '#aaa',
            fontSize: 10,
            // formatter: function(val) {
            //   var strs = val.split('') //字符串数组
            //   var str = ''
            //   for (var i = 0, s; (s = strs[i++]); ) {
            //     //遍历字符串数组
            //     str += s
            //     if (!(i % 4)) str += '\n' //按需要求余
            //   }
            //   return str
            // },

            interval: 0,
            rotate: 30,
          },

          axisLine: {
            lineStyle: {
              color: '#05358b',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} ',
            color: '#aaa',
            fontSize: 10,
          },

          // 图表区域横向的线
          splitLine: {
            show: false,
            lineStyle: {
              color: '#05358b',
            },
          },
        },
        series: [
          {
            data: data1,
            type: 'bar',
            label: {
              show: true,
              color: '#fff',
              fontSize: 13,
              position: 'outside',
              // offset: [0, -70],
              // align: 'center',
              // verticalAlign: 'top',
            },
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgb(128, 255, 165)' },
                { offset: 1, color: 'rgb(1, 191, 236)' },
              ]),
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
